<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代换库</title>
    <link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
    <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
    <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
    <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
    <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
    <script type="text/javascript" src="/webapp/js/common/config.js"></script>
</head>
<body>
<div class="easyui-container-fluid">
    <div class="easyui-panel" style="border: none;">
        <div class="nav" id="nav"></div>
        <div class="easyui-panel" style="border:none;width:100%;">
            <form id="ff">
                <div style="margin-bottom:20px;padding-left:20px;">
                    <label class="wrap-label" id="label-for-matchtype">类型：<input type="text" class="easyui-combobox"
                                                                                 data-options="panelHeight:'auto'"
                                                                                 style="width:100px;" id="matchType"
                                                                                 name="matchType"/></label>
                    <label class="wrap-label" id="label-for-categorycode">品类：<input type="text" class="easyui-combobox"
                                                                                    style="width:100px;"
                                                                                    name="categoryCode"
                                                                                    id="categoryCode"/></label>
                    <label class="wrap-label" id="label-for-brandcode">品牌：<input type="text" class="easyui-combobox"
                                                                                 style="width:100px;" name="brandCode"
                                                                                 id="brandCode"/></label>


                    <label class="wrap-label" id="label-for-entityStatus">状态：
                        <input id="entityStatus" class="easyui-switchbutton" checked style="width:80px;height:30px;"
                               onText="启用" offText="禁用">
                    </label>
                    <a class="easyui-linkbutton c8" style="margin-left:40px;width:80px;" onclick="openaddDisable()">复杂条件</a>
                    <a class="easyui-linkbutton c8" style="margin-left:40px;width:80px;" onclick="searchBy()">查询</a>
                    <a class="easyui-linkbutton c8" style="margin-left:40px;width:80px;" onclick="reset()">重置条件</a>
                </div>
                <div id="addDisable" class="easyui-dialog"  style="height:200px;width:650px;"
                     title="复杂查询" iconCls="icon-ok"
                     toolbar="#dlg-toolbar" buttons="#dlg-buttons" closed="true">
                    <div style="margin-top: 10px">
                        <label class="wrap-label" >最后操作人：
                            <input type="text" class="easyui-combobox" name="operateUser" id="user" style="width:100px;"/></label>

                        <label class="wrap-label" id="label-for-modelCode">型号码：<input type="text" class="easyui-textbox"
                                                                                      style="width:100px;" name="modelCode"
                                                                                      id="modelCode"/></label>

                        <label class="wrap-label" id="label-for-originalModel">原始型号：<input type="text"
                                                                                           class="easyui-textbox"
                                                                                           style="width:100px;"
                                                                                           name="originalModel"
                                                                                           id="originalModel"/></label>
                    </div>
                    <div style="margin-top: 10px;">
                        <label class="wrap-label" >禁用关键字：
                            <input type="text"
                                   class="easyui-textbox"
                                   style="width:100px;"
                                   name="remark"
                                   id="remark"/>
                        </label>
                        <label class="wrap-label" >禁用原因：
                            <select  name="special" class="easyui-combobox" id="special" data-options="panelHeight:'150',prompt:'--请选择--'" style="width:80px">
                                <option value=""></option>
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </label>
                        <!--<label class="wrap-label" id="label-for-remark">禁用关键字：-->
                        <!--<input type="text" name="remark" id="remark"  class="easyui-textbox" style="width:100px;"/></label>-->

                    </div>

                    <div style="margin-top: 20px">
                        <a href="javascript:void(0);" style="margin-left:260px;width:80px;" class="easyui-linkbutton c8" onclick="searchBy()">查询</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="table-wrapper">
            <table id="datagrid" style="width:100%;" data-options="fitColumns:true,scrollbarSize:0">
                <thead>
                <tr>
                    <th data-options="field:'id',align:'center'" checkbox="true" width="80"></th>
                    <th data-options="field:'categoryName',align:'center'" width="80">品类</th>
                    <th data-options="field:'brandName',align:'center'" width="80">品牌</th>
                    <th data-options="field:'brandCode',align:'center'" width="60">品牌码</th>
                    <th data-options="field:'originalModel',align:'center'" width="150">原始型号</th>
                    <th data-options="field:'modelName',align:'center'" width="120">型号</th>
                    <th data-options="field:'modelCode',align:'center'" width="60">型号码</th>
                    <th data-options="field:'remark',align:'center'" width="60">备注</th>
                    <th data-options="field:'updateTime',align:'center'" width="80">修改时间</th>
                    <th data-options="field:'createTime',align:'center'" width="80">创建时间</th>
                    <th data-options="field:'operateUser',align:'center'" width="50">操作人</th>
                    <th data-options="field:'entityStatus',align:'center',formatter:statusFormatter" width="40">状态</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        setNav();
        initPageSelector();
        var height = $(window).height();
        var nav_height = $("#nav")._outerHeight();
        var ff_height = $("#ff").height();
        var table_height = height - nav_height - ff_height - 20;
        $("#datagrid").css("max-height", table_height);
        $("#datagrid").datagrid({
            pagination: true,
            rownumbers: true,
            toolbar: [{
                text: '禁用',
                handler: updateStatus
            }],
            loadFilter: function (data) {
                var res = {rows: data.content, total: data.totalElements};
                var content = data.content;
                var count = 0;
                var rows = [];
                var merges = [];
                content.map(function (item, index) {
                    var arr = item.matchModels;
                    if (arr && arr.length > 1) {
                        merges.push({index: count, rowspan: arr.length});
                    }
                    if (arr && arr.length > 0) {
                        arr.map(function (item2) {
                            var record = {
                                id: item.id,
                                entityStatus: item.entityStatus,
                                originalModel: item.originalModel,
                                updateTime: item.updateTime,
                                createTime: item.createTime,
                                operateUser: item.operateUser
                            };
                            record = $.extend(true, record, item2);
                            rows.push(record);
                            count++;
                        });
                    } else {
                        rows.push(item);
                        count++;
                    }
                });
                res.rows = rows;
                res.merges = merges;
                return res;
            },
            onLoadSuccess: function (data) {
                var merges = data.merges;
                for (var i = 0; i < merges.length; i++) {
                    $("#datagrid").datagrid("mergeCells", {
                        index: merges[i].index,
                        field: "originalModel",
                        rowspan: merges[i].rowspan
                    });
                }
            },
            onBeforeCheck: function (index, row) {
                if ("DISABLE" == row.entityStatus) {
                    return false;
                }
                return true;
            }
        }).datagrid("getPager").pagination({
            onSelectPage: searchBy
        });
        aRecords("代换库","/webapp/pages/product/historyMatchData/")
        searchBy(1, 100);
    });

    function initPageSelector() {
        initUserSelect("user");
        initCategorySelectnew("categoryCode",function (code) {
            initBrandSelectC("brandCode",null,null,code);
        });
        $("#matchType").combobox({
            data: [
                {text: "-请选择-", value: ""},
                {text: "套餐", value: "COMBO"},
                {text: "禁用", value: "DISABLE"},
                {text: "手工", value: "MATCH_MODEL"}
            ]
        });
    }

    function searchBy(page, size) {
        $('#addDisable').dialog('close');
        var data = getFormData(document.getElementById("ff"));
        data.entityStatus = $("#entityStatus").switchbutton("options").checked == true ? "OK" : "DISABLE";
        if (!size) {
            page = 1;
            size = $("#datagrid").datagrid("getPager").pagination("options").pageSize || 100;
        }
        var remark = $("#remark").textbox('getValue');
        var modelCode = $("#modelCode").textbox('getValue');
        var originalModel = $("#originalModel").textbox('getValue');
        var operateUser = $('#user').combobox('getValue');
        var special = $('#special').combobox('getValue');
        data.remark=remark;
        data.modelCode=modelCode;
        data.originalModel=originalModel;

        data.special=special;
        if(operateUser != "-请选择-"){
            data.operateUser=operateUser;
        }
        var pager = {page: page, size: size};
        $.ajax({
            url: config.url + "/historyMatchData/page?" + transfer2url(pager),
            type: "get",
            data: transfer(data),
            xhrFields: {withCredentials: true},
            beforeSend: function () {
                $.messager.progress({
                    title: "请稍等",
                    interval: 50,
                    text: "数据加载中..."
                });
            },
            complete: function () {
                $.messager.progress("close");
            },
            success: function (data) {
                $("#datagrid").datagrid("loadData", data);
            },
            error: function (data) {
            }
        });
    }

    function updateStatus() {
        var selectedRow = $("#datagrid").datagrid("getChecked");
        if (selectedRow && selectedRow.length > 0) {
            var ids = selectedRow.map(function (item) {
                return item.id;
            });
            $.messager.confirm("提示", "您确定禁用吗？", function (r) {
                if (r) {
                    $.ajax({
                        url: config.url + "/historyMatchData/",
                        type: "DELETE",
                        data: JSON.stringify(ids),
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        xhrFields: {withCredentials: true},
                        beforeSend: function () {
                            $.messager.progress({
                                title: "请稍等",
                                interval: 50,
                                text: "操作进行中..."
                            });
                        },
                        complete: function () {
                            $.messager.progress("close");
                        },
                        success: function (data) {
                            if (data) {
                                searchBy();
                            }
                        },
                        error: function (data) {

                        }
                    });
                }
            });
        } else {
            $.messager.alert("提示", "请选择相关记录", "error");
        }

    }
    //打开复杂条件
    function openaddDisable() {
        // $("#remark").textbox('setValue','')
        $('#addDisable').dialog('open');

    }
    //打开复杂条件
    function reset() {
        $("#remark").textbox('setValue','');
        $("#modelCode").textbox('setValue','')
        $("#originalModel").textbox('setValue','')
        $("#user").combobox('setValue','')
        $("#special").combobox('setValue','')
        // $('#addDisable').dialog('open');

    }

    $("#ff").keydown(function (event) {
        var e = event || window.event;
        var keyCode = e.keyCode || e.which;
        if(keyCode=="13"){
            searchBy();
        }
    });
</script>
</html>